<template>
	<div class="actual-content">
		<RouterView v-slot="{ Component, route }">
			<template v-if="Component">
				<KeepAlive :max="30">
					<component :is="Component" :key="route.path + route.name + refreshFlag"></component>
				</KeepAlive>
			</template>
		</RouterView>
	</div>
</template>

<script setup>
import { shallowRef } from "vue"

const refreshFlag = shallowRef(0)
function onRefresh() {
	refreshFlag.value++
}

defineExpose({
	onRefresh,
})
</script>

<style lang="scss" scoped>
.actual-content {
	position: relative;
	width: 100%;
	box-sizing: border-box;
}
</style>
